<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Code_cloud</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <div class="cloud">

        </div>
    </div>
<script>
    function roundText(){
        var text = ("qwertyuiopasdfghjklzxcvbnm0123456789")
        letter = text[Math.floor(Math.random() * text.length)]
        return letter
    }
    function rain(){
        let cloud = document.querySelector('.cloud')
        // let e = cloud.createElement('div')
        let e = document.createElement('div')
        // 最后的数字是文字的宽度
        let left = Math.floor(Math.random() * 320)
        let size = Math.random() * 1.5
        let duration = Math.random() * 1
        e.classList.add('text')
        cloud.appendChild(e)
        e.innerText = roundText()
        e.style.left = left + 'px'
        e.style.fontSize = 0.5+size+'em';
        // 下坠的动画速度
        e.style.animationDuration = 2 + duration + 's'

        setTimeout(function (){
            // cloud.removeChild(e)
            cloud.removeChild(e)
            // document.body.removeChild(e)
        },2000)
    }

    setInterval(function (){
        rain()
    },20)
</script>
</body>
</html>